<!-- 聊天 -- 入口 -->
<template>
  <div class="chat_container">
    <el-row v-if="!hasConversation" style="width: 100%;">
      <!-- ====== 整体左侧 ======-->
      <el-col class="chat_left" :span="5">
        <!-- 当前用户信息 -->
        <div class="user_title">
          <div>
            <img class="user_logo" :src="userInfo.logo" alt="">
            <span class="textOverflow" :title="userInfo.name">{{userInfo.name}}</span>
          </div>
        </div>

        <!-- 聊天对象列表 -->
        <div class="user_list">
          <ul>
            <li 
            :key="index" 
            :class="toUserId == item.userid ? 'cur' : ''"
            v-for="(item, index) in customerWindow.leftList" 
            @click="changePeople(item.userid, item.username)">
              <div class="clearfix">
                <img class="user_logo" :src="item.logo" alt="">
                <span class="textOverflow" :title="item.username">{{item.username}}</span>
              </div>
            </li>
          </ul>
        </div>
      </el-col>

      <!-- ===== 整体中间部分 -- 聊天的主体 ===== -->
      <el-col class="chat_middle" :span="12">
        <!-- 聊天的名称 -->
        <div class="conversation_title clearfix">
          <span class="fl">{{ toUserIdName }}</span>
          <!-- <i class="el-icon-plus fr" @click="addNewGroupChat"></i> -->
        </div>

        <!-- 聊天内容显示区域 -->
        <div id="conversation_body" class="conversation_body">
          <div
          v-for="(item, index) in contentInfo" 
          :key="index">
            <div v-if="item.type != undefined && item.type == 'time'" class="clearfix con_body_middle">
              <div>
                <p>{{ item.text }}</p>
              </div>
            </div>

            <div v-if="item.fromUserId != undefined && item.fromUserId != userInfo.id" class="con_body_left clearfix">
              <img class="user_logo fl" :src="item.fromUserLogo" alt="">
              <div>
                <div class="con_item con_item_left" v-html="item.message"></div>
              </div>
            </div>

            <div v-if="item.fromUserId != undefined && item.fromUserId == userInfo.id" class="con_body_right clearfix">
              <img class="user_logo fr" :src="item.fromUserLogo" alt="">
              <div>
                <div class="con_item con_item_right" v-html="item.message"></div>
              </div>
            </div>
            
            <div v-if="item.type != undefined && item.type == 'notice'" class="clearfix con_body_middle con_body_middle_notice">
              <div>
                <p>{{ item.text }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 富文本编辑器 -->
        <div class="conversation_write">
          <!-- <tin-edite :height="140" :value="editorMsg" size-editor="msg" @editorChange="editorChange"></tin-edite> -->
          <el-button class="send_msg" size="mini" :disabled="submitFlag">发送</el-button>
        </div>
      </el-col>

      <!-- ===== 整体的右侧 -- 咨询商品/订单/问题 ===== -->
      <el-col class="chat_right" :span="7">
        <!-- 切换 -->
        <el-row class="chat_right_body_title clearfix">
          <el-col :span="8" class="cur"><span :class="toggle_type == 0 ? 'cur' : ''" @click="toggleType('0')">开处方</span></el-col>
          <el-col :span="8"><span :class="toggle_type == 1 ? 'cur' : ''" @click="toggleType('1')">处方记录</span></el-col>
        </el-row>
        <div class="chat_right_body_main">
          <div :class="toggle_type == 0 ? 'show' : ''">
           
          </div>

          <div :class="toggle_type == 1 ? 'show' : ''">
            
          </div>

        </div>
      </el-col>
    </el-row>
    <div class="noProduct_view" v-if="hasConversation" style="margin-left: 500px;margin-top: 200px;">
      <div>
          <!-- <img src="~/static/img/products/thereNoData.png" alt=""> -->
          <p style="text-align: center;line-height: 100px;">暂无会话</p>
      </div>
    </div>

  </div>
</template>
<script>
// import tinEdite from '~/components/module/editor.vue'
// import { getCurrentUserChat, getHistoryByUserId, getChatFileContent } from '~/api/userCenter'
export default {
  data () {
    return {
      timer: null,
      socket: null,
      setTop: false,      // 置顶按钮
      hasConversation: false, // 没有会话
      toggle_type: 0,     // 右侧 咨询商品/咨询订单/常见问题的切换
      editorMsg: '',      // 富文本的信息
      toUserId: '',       // 当前会话用户的id
      toUserIdName: '',   // 当前会话用户的名字
      historyDate: '',    // 查询历史消息的时间
      historyDateRule: [],// 包含一个月内所有有过聊天的日期
      historyNum: 0,      // 触顶次数 -- 查询历史消息的依据
      userInfo: {         // 当前登录用户的信息
        id: '',
        logo: '',
        name: ''
      },
      customerWindow: {   // 会话窗口左右两边的信息
        leftList: [],
        rightList: {
          productList: [],
          orderList: []
        }
      },
      rightProblemList: [], // 右侧常见问题
      contentInfo: [],      // 中心的信息部分
      submitFlag: false,    // 防止多次连点 重复提交
    }
  },
  components: {
  },
  mounted() {
  },
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>
$orange: #ddd;
$white: #fff;
$borRadius: 10px;
$marLeft: 20px;
$logoH: 40px;
$bgBorder: #ddd;
$borderLine: #eeeeee;
$rightBg: #fde5bf;
$borderGreen: #ccc;
$wordGreen: #333;
$bgGreen: #ddd;

$allHeight: 780px;      // 窗体总高
$userLogoHeight: 90px;  // 用户左上角头像

.con_item{
  padding: 10px;
  position: relative;
  border-radius: 5px;
  min-height: $logoH;
  display: inline-block;
  box-sizing: border-box;
  max-width: 98%;
  word-wrap: break-word;
  /deep/ img{
    max-width: 100%;
    height: auto;
  }
  /deep/ p{
    word-wrap:break-word;
    line-height: 24px;
  }

  &.con_item_left{
    margin-left: 8px;
    &::after, &:after{
      width: 0px;
      content: '';
      height: 0px;
      left: -5px;
      position: absolute;
      top: ($logoH / 2 - 8);
      border-top: 5px solid transparent;
      border-right: 5px solid $borderLine;
      border-bottom: 5px solid transparent;
    }
  }
  &.con_item_right{
    margin-right: 8px;
    &::after, &:after{
      width: 0px;
      content: '';
      height: 0px;
      right: -5px;
      position: absolute;
      top: ($logoH / 2 - 8);
      border-top: 5px solid transparent;
      border-left: 5px solid $rightBg;
      border-bottom: 5px solid transparent;
    }
  }
}

.chat_container{
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: $borRadius;
  background-color: $white;
  & > .el-row{
    & > div{
      height: $allHeight;
    }
  }
}
.chat_left{
  max-width: 250px;
  position: relative;
  .user_title{
    height: $userLogoHeight;
    padding: $marLeft 0;
    box-sizing: border-box;
    background-color: $orange;
    border-top-left-radius: $borRadius;
    div{
      height: 50px;
      text-align: left;
      margin-left: $marLeft;
      position: relative;
      img.user_logo{
        width: 50px;
        height: 50px;
        position: absolute;
        border-radius: 3px;
      }
      span{
        width: 100%;
        color: $white;
        font-size: 18px;
        line-height: 50px;
        font-weight: bold;
        padding-left: 60px;
        display: inline-block;
        box-sizing: border-box;
      }
    }
  }
  .user_list{
    position: relative;
    height: ($allHeight - $userLogoHeight);
    .user_funs{
      left: 0;
      bottom: 0;
      position: absolute;
      background-color: $white;
      span{
        cursor: pointer;
        padding: 0 5px;
        line-height: 40px;
        &:hover{
          color: $orange;
        }
        img{
          width: 20px;
        }
      }
    }
    li{
      width: 100%;
      cursor: pointer;
      padding: 14px 17px;
      border-bottom: 1px solid $bgBorder;
      box-sizing: border-box;
      &.cur, &:hover{
        background-color: $bgBorder;
      }
      &:last-child{
        border: 0;
      }
      div{
        height: $logoH;
        position: relative;
        text-align: left;
        img.user_logo{
          width: $logoH;
          height: $logoH;
          position: absolute;
          border: 1px solid $borderGreen;
          box-sizing: border-box;
        }
        span{
          width: 100%;
          line-height: $logoH;
          padding-left: 50px;
          box-sizing: border-box;
          display: inline-block;
        }
      }
    }
  }
}
.chat_middle{
  border-left: 1px solid $borderLine;
  border-right: 1px solid $borderLine;
  .conversation_title{
    height: 60px;
    font-size: 16px;
    padding: 0 15px;
    font-weight: bold;
    line-height: 60px;
    box-sizing: border-box;
    i{
      color: $orange;
      cursor: pointer;
      line-height: 60px;
      font-weight: bold;
    }
  }
  .conversation_body{
    padding: 10px;
    height: 546px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    border-top: 1px solid $borderLine;
    border-bottom: 1px solid $borderLine;

    img.user_logo{
      width: $logoH;
      height: $logoH;
      // border: 1px solid $borderGreen;
      box-sizing: border-box;
    }
    .con_body_left{
      padding: 5px 0;
      & > div{
        width: 100%;
        text-align: left;
        padding-left: $logoH;
        box-sizing: border-box;
        div{
          background-color: $borderLine;
        }
      }
    }
    .con_body_right{
      padding: 5px 0;
      & > div{
        width: 100%;
        text-align: right;
        padding-right: $logoH;
        box-sizing: border-box;
        div{
          text-align: left;
          background-color: $rightBg;
        }
      }
    }
    .con_body_middle{
      div{
        width: 100%;
        text-align: center;
        p{
          font-size: 12px;
          padding: 4px 8px;
          border-radius: 2px;
          display: inline-block;
          background-color: rgba(253, 229, 191, 0.4);
        }
      }
    }
  }
  .conversation_write{
    position: relative;
    // border-bottom: 1px solid $borderLine;
    /deep/ .mce-tinymce{
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0) !important;
    }
    /deep/ .mce-btn-group:not(:first-child){
      border: 0;
    }
    /deep/ .mce-panel{
      border: 0;
    }
    /deep/ .mce-top-part::before{
      box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
    }
    /deep/ iframe{
      padding: 6px 10px;
      box-sizing: border-box;
    }
    .send_msg{
      right: 10px;
      bottom: 10px;
      position: absolute;
    }
  }
}
.chat_right{
  max-width: 350px;
  .chat_right_header{
    height: 60px;
    line-height: 60px;
    p{
      color: $wordGreen;
      margin-right: 20px;
      &:last-child{
        margin-right: 40px;
      }
      span{
        margin-right: 6px;
      }
    }
  }
  .chat_right_body_title{
    border-top: 1px solid $borderLine;
    border-bottom: 1px solid $borderLine;
    div{
      span{
        display: block;
        cursor: pointer;
        line-height: 40px;
        text-align: center;
        background-color: $bgGreen;
        border-left: 1px solid $borderLine;
        &:first-child{
          border-left: 0;
        }
        &.cur, &:hover{
          color: #fff;
          background-color: $orange;
        }
      }
    }
  }
  .chat_right_body_main{
    & > div{
      display: none;
      &.show{
        display: block;
      }
      ul.chat_right_body_problem{
        padding: 15px;
        li{
          padding: 10px 0;
          border-bottom: 1px solid $borderLine;
          &:last-child{
            margin-bottom: 0;
            border-bottom: 0;
          }
          p{
            text-align: left;
            em{
                width: 22px;
                color: #fff;
                line-height: 22px;
                text-align: center;
                font-style: normal;
                display: inline-block;
                &.problem_title_top{
                    background-color: $orange;
                }
                &.problem_title_bottom{
                    background-color: #84ae41;
                }
            }
            span{
              width: 100%;
              display: block;
              padding-left: 32px;
              box-sizing: border-box;
            }
            &:first-child{
                margin-bottom: 5px;
                span{
                    font-weight: bold;
                }
            }
            &:last-child{
                span{
                    display: block;
                    padding-left: 32px;
                }
            }
          }
        }
      }
      ul.chat_right_body_product{
        padding: 10px;
        li{
          padding: 5px 0;
          border-bottom: 1px solid $borderLine;
          &:last-child{
            margin-bottom: 0;
            border-bottom: 0;
          }
          & > div.order_title{
            margin-bottom: 5px;
            background-color: #fdf4e8;
            span{
              padding: 0 4px;
              font-size: 12px;
              line-height: 30px;
              &:last-child{
                color: $wordGreen;
              }
            }
          }
          & > div.pro_deta{
            div{
              &:first-child{
                width: 100px;
                height: 66px;
                img{
                  max-width: 100px;
                  max-height: 66px;
                }
              }
              &:last-child{
                width: 100%;
                text-align: left;
                padding-left: 110px;
                box-sizing: border-box;
                p{
                  &:first-child{
                    height: 46px;
                    color: $orange;
                    line-height: 23px;
                  }
                  &:last-child{
                    color: #ef4220;
                    height: 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
